<template>
  <div>
    <!-- title -->
    <PageTitle>
      {{ $t("menu.M_10400604") }}
    </PageTitle>
    <!-- body -->
    <el-card
      shadow="never"
      :body-style="{ padding: '0px' }"
      @current-change="currentChangeHandle"
      :page-size="pageSize"
      :total="rows"
      :current-page="pageNo"
    >
      <el-form class="p-4" inline :model="dataForm">
        <el-form-item>
          <el-input
            v-model="dataForm.appName"
            @blur="() => (dataForm.appName = dataForm.appName.trim())"
            @keyup.enter.native="getDataList((pageNo = 1))"
            maxlength="32"
            :placeholder="$t('developer_app.app_name')"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.status"
            clearable
            :placeholder="$t('developer_app.status')"
          >
            <el-option
              v-for="item in $t('developer_app.initial_examine.status_option')"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDataList((pageNo = 1))" class="w-8">
            <svg-icon icon-class="search" />
          </el-button>
        </el-form-item>
      </el-form>
      <el-table :data="dataList" v-loading="dataListLoading" stripe>
        <el-table-column
          prop="appIcon"
          width="400px"
          min-width="300px"
          :label="$t('developer_app.app')"
        >
          <template v-slot="{ row }">
            <div
              style="display: flex; flex-direction: row"
              class="cursor-pointer"
              @click="infoHandle(row.appId, row.appVersionId)"
            >
              <div class="app-logo2" style="margin-right: 10px">
                <img :src="iconView(row.appIcon)" class="app-logo" width="32px" />
              </div>
              <div>
                <div style="color: #12263f">
                  {{ row.appName }}
                </div>
                <div style="color: #95aac9 !important">
                  {{ row.appVersion }}
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="developerName"
          min-width="100"
          :label="$t('developer.name')"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          min-width="140px"
          :label="$t('developer_app.version_status')"
        >
          <template v-slot="scope">
            <el-tag
              v-if="
                scope.row.appVersionStatus === -1 ||
                scope.row.appVersionStatus === 0 ||
                scope.row.appVersionStatus === 2 ||
                scope.row.appVersionStatus === 6
              "
              size="small"
              type="warning"
              >{{ handleStatus(scope.row.appVersionStatus) }}
            </el-tag>
            <el-tag v-if="scope.row.appVersionStatus === 1" size="small" type="success">
              {{ handleStatus(scope.row.appVersionStatus) }}
            </el-tag>
            <el-tag
              v-if="
                scope.row.appVersionStatus === 5 ||
                scope.row.appVersionStatus === 7 ||
                scope.row.appVersionStatus === 9
              "
              size="small"
              type="private"
              >{{ handleStatus(scope.row.appVersionStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="submitTime" :label="$t('developer_app.app_submit_time')">
          <template v-slot="scope">
            <div :title="timeFilter(scope.row.submitTime)">
              {{ dateFilter(scope.row.submitTime) }}
              {{ scope.row.submitTime ? "" : "-" }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" min-width="100" :label="$t('developer.status')">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 2" size="small" type="warning">
              {{ $t("developer_app.initial_examine.status_option[2].label") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 1" size="small"
              >{{ $t("developer_app.initial_examine.status_option[1].label") }}
            </el-tag>
            <el-tag v-if="scope.row.status === 0" size="small" type="info">
              {{ $t("developer_app.initial_examine.status_option[0].label") }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="examineUserName" min-width="100"> </el-table-column>
        <el-table-column width="75px">
          <template v-slot="scope">
            <div :title="$t('common.detail')"><el-button text class="w-8" @click="infoHandle(scope.row.appId, scope.row.appVersionId)"><svg-icon icon-class="View"/></el-button></div>
            <!-- <el-dropdown class="align-middle" trigger="click">
              <el-button text>
                <svg-icon icon-class="MoreFilled" />
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                    @click="infoHandle(scope.row.appId, scope.row.appVersionId)"
                  >
                    {{ $t("common.detail") }}
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown> -->
            <!-- <el-button
              type="text"
              @click="infoHandle(scope.row.appId, scope.row.appVersionId)"
            >
              {{ $t('developer.operate_detail') }}
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <app-version-detail
      v-if="appVersionDetailVisible"
      ref="appVersionDetail"
      @close="appVersionDetailVisible = false"
      @refreshDataList="getDataList"
      v-model="appVersionDetailVisible"
    ></app-version-detail>
  </div>
</template>
<script>
import { timeFilter, dateFilter } from "@/filters/index";
import { formatDate } from "@/utils/formatDate";
import { formatCountry } from "@/utils/formatCountry";
import { getInitialExamine } from "@/api/developer-app";
import AppVersionDetail from "./components/app-version-detail";
import PageTitle from "@/components/PageTitle/index.vue";
export default {
  components: {
    AppVersionDetail,
    PageTitle,
  },
  data() {
    return {
      dataForm: {
        appName: "",
        developerType: null,
        status: "",
      },
      appVersionDetailVisible: false,
      dataList: [],
      pageNo: 1,
      pageSize: 10,
      rows: 0,
      dataListLoading: false,
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    timeFilter,
    dateFilter,
    iconView(icon) {
      console.log(icon);
      if (icon) {
        return import.meta.env.VITE_APP_BASE_API + icon;
        // return icon
      }
      // return require("@/assets/img/Android.png");
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.dataForm.status,
        appName: this.dataForm.appName,
      };
      getInitialExamine(params)
        .then((data) => {
          this.dataList = data.data;
          this.rows = data.rows;
          this.dataListLoading = false;
        })
        .catch((e) => {
          // this.$message.error(e.message)
          this.dataListLoading = false;
          console.log(`err:${JSON.stringify(e)}`);
        });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageNo = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNo = val;
      this.getDataList();
    },
    formatDate(cellValue, fmt) {
      return formatDate(cellValue, fmt);
    },
    formatCountry(row, column, cellValue, index) {
      return formatCountry(cellValue);
    },
    infoHandle(appId, appVersionId) {
      this.appVersionDetailVisible = true;
      console.log("appId", appId);
      console.log("appVersionId", appVersionId);
      this.$nextTick(() => {
        this.$refs.appVersionDetail.init(appId, appVersionId);
      });
    },
    handleStatus(status) {
      if (status === 9) {
        return this.$t("developer_app.version_status_option[0].label");
      } else if (status === 7) {
        return this.$t("developer_app.version_status_option[1].label");
      } else if (status === 6) {
        return this.$t("developer_app.version_status_option[2].label");
      } else if (status === 5) {
        return this.$t("developer_app.version_status_option[3].label");
      } else if (status === 2) {
        return this.$t("developer_app.version_status_option[4].label");
      } else if (status === 1) {
        return this.$t("developer_app.version_status_option[5].label");
      } else if (status === 0) {
        return this.$t("developer_app.version_status_option[6].label");
      } else if (status === -1) {
        return this.$t("developer_app.version_status_option[7].label");
      }
    },
  },
};
</script>
<style lang="scss" scoped></style>
